<script setup lang="ts">
import {computed} from 'vue'
import type {API} from "@/type/type"
import DateUtil from "@/utils/DateUtils"
import {toFileUrl} from "@/api/system/file";
import useLesson from "@/views/lesson/select-lesson/useLesson";

// 定义组件名
defineOptions({
  name: 'LessonItem'
})

const props = withDefaults(defineProps<{
  lesson: API.ILesson
}>(), {})

const emit = defineEmits<{
  (e: 'lessonCancel', lesson: API.ILesson): void,
  (e: 'lessonSignIn', lesson: API.ILesson): void
}>()

// 计算进度百分比
const progressPercentage = computed(() => {
  return props.lesson.maxStudents > 0
      ? Math.round((props.lesson.currentStudents / props.lesson.maxStudents) * 100)
      : 0
})

const {duration, currentStatusConfig} = useLesson(props.lesson)



</script>

<template>
  <div class="lesson-item">
    <div class="card-header">
      <div class="header-tags">
        <van-tag
            round
            :color="lesson.licenseTypeColor || '#1989fa'"
            text-color="white"
            size="medium"
        >
          {{ `${lesson?.licenseTypeCode}${lesson?.licenseTypeName}` || '未知驾照类型' }}
        </van-tag>
        <van-tag
            round
            :color="lesson.courseSubjectColor || '#1989fa'"
            text-color="white"
            size="medium"
        >
          {{ lesson.courseSubjectName || '未知科目' }}
        </van-tag>
        <van-tag plain :color="currentStatusConfig.color || '#1989fa'">
          {{ currentStatusConfig.text }}
        </van-tag>
      </div>
    </div>
    <div class="card-time">
      <van-icon name="clock-o" size="16"/>
      <span class="date">{{ DateUtil.formatCustom(lesson.startTime, 'MM-dd') }}
        {{ DateUtil.getDayOfWeek(lesson.startTime, 'chinese') }}
      </span>
      <span class="time">{{ DateUtil.formatCustom(lesson.startTime, 'HH:mm') }} - {{
          DateUtil.formatCustom(lesson.endTime, 'HH:mm')
        }}</span>
      <span class="duration">({{ duration }}小时)</span>
    </div>
    <div class="card-content">
      <van-row gutter="10" class="info-row">
        <van-col span="4">
          <van-image round width="40" height="40"
              :src="lesson.coachAvatar?toFileUrl(lesson.coachAvatar):'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'"
          />
        </van-col>
        <van-col span="20">
          <div class="info-text">
            <div class="info-title">{{ lesson.coachName || '未指定教练' }}</div>
            <div class="info-subtitle">
              <van-tag plain type="primary" v-if="lesson.plateNumber">
                {{ lesson.plateNumber }}
              </van-tag>
              <van-tag plain type="warning" v-else>
                学员车信息异常
              </van-tag>
            </div>
          </div>
        </van-col>
      </van-row>

      <van-progress
          v-if="lesson.maxStudents > 0"
          :percentage="progressPercentage"
          :stroke-width="8"
          :color="progressPercentage >= 100 ? '#ee0a24' : '#1989fa'"
          track-color="#ebedf0"
          style="margin-top: 8px;"
      />

      <div class="progress-info">
        <span>已预约 {{ lesson.currentStudents }}/{{ lesson.maxStudents }} 人</span>
        <span v-if="progressPercentage < 100">剩余 {{ lesson.maxStudents - lesson.currentStudents }} 个名额</span>
        <span v-else>已满员</span>
      </div>

      <van-field
          v-if="lesson.remark"
          :model-value="lesson.remark"
          label="备注"
          type="textarea"
          autosize
          readonly
          input-align="right"
          class="remark-field"
      />
    </div>

    <div class="card-footer">
      <!-- 课程开始了不能取消，课程结束了不能签到-->
      <van-button
          type="default"
          size="small"
          @click="emit('lessonCancel', lesson)"
          :disabled="DateUtil.isBefore(lesson.startTime, new  Date())"
      >
        取消预约
      </van-button>
      <!--没开始不能签到,结束了不能签到，已经签到了不能再签到-->
      <van-button
          type="primary"
          size="small"
          @click="emit('lessonSignIn', lesson)"
          :disabled="DateUtil.isBefore( new Date(),lesson.startTime)||DateUtil.isBefore( lesson.endTime,new  Date()) || lesson.signInStatus === '2'"
      >
        点击签到
      </van-button>
      <!--{{ lesson.endTime}}-->
    </div>
  </div>
</template>

<style scoped lang="less">
.lesson-item {
  margin: 8px 10px;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  width: calc(100% - 20px);
  background: #fff;
  transition: all 0.3s ease;


  .card-header {
    margin-bottom: 12px;

    .header-tags {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
  }

  .card-time {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #646566;
    margin-bottom: 16px;
    flex-wrap: wrap;

    .date {
      font-weight: bold;
      margin-right: 8px;
      white-space: nowrap;
    }

    .time {
      color: #1989fa;
      white-space: nowrap;
    }

    .duration {
      color: #969799;
      font-size: 12px;
      white-space: nowrap;
    }
  }

  .card-content {
    overflow: hidden;

    .info-row {
      display: flex;
      align-items: center;

      .info-text {
        margin-left: 8px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        .info-title {
          font-size: 15px;
          font-weight: bold;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-bottom: 4px;
        }

        .info-subtitle {
          display: flex;
          gap: 4px;
          font-size: 13px;
          color: #969799;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-top: 4px;
        }
      }
    }

    .progress-info {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: #969799;
      margin-top: 10px;
      flex-wrap: wrap;
      gap: 4px;
    }

    .remark-field {
      margin-top: 8px;
      padding: 0;
      --van-field-label-color: #969799;
      --van-field-label-width: 40px;

      :deep(.van-field__control) {
        white-space: pre-wrap;
        word-break: break-word;
      }
    }
  }

  .card-footer {
    display: flex;
    justify-content: end;
    gap: 8px;
    margin-top: 8px;
  }
}
</style>
